<template>
  <span>{{ time }}</span>
</template>

<script>
export default {
  name: "Countdown",
  props: {
    end: {
      type: Number,
      default: () => {
        return Date.now();
      },
    },
  },
  data() {
    return {
      time: "00:00:00",
    };
  },
  created() {
    this.calcTime();
    setInterval(this.calcTime, 1000);
  },
  methods: {
    calcTime() {
      let offset = this.end - Date.now();
      if (offset <= 0) return;
      this.time = "";

      let h = parseInt(offset / 3600000);
      this.time += (h > 9 ? h : "0" + h) + ":";

      offset -= h * 3600000;
      let m = parseInt(offset / 60000);
      this.time += (m > 9 ? m : "0" + m) + ":";

      offset -= m * 60000;
      let s = parseInt(offset / 1000);
      this.time += s > 9 ? s : "0" + s;
    },
  },
};
</script>

<style lang="scss" scoped></style>
